<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>MNIST WEB BY YBS</title>
	<link rel="stylesheet" href="{{url_for('static', filename='style.css')}}">
</head>

<body>
		<h1>手写数字识别</h1>


		<div class="centered">
		<a href="https://github.com/ybsdegit/Keras_flask_mnist/"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"></a>
			<canvas id="canvas" width="128" height="128"></canvas>
		</div>

		<div class="centered">
			<input type="button" class="myButton" value="Predict" style="">
			<input type="button" id="clearButton" value="Clear" style="">
		</div>

		<div class="centered">
			<h1 id="result"></h1>
		</div>


  		<script src="{{url_for('static',filename='jquery-3.2.0.min.js')}}"></script>
	    <script src="{{url_for('static',filename='index.js')}}"></script>
	    <script type="text/javascript">
	   		$(".myButton").click(function(){
	   			$('#result').text('  Predicting...');
	   			var $SCRIPT_ROOT = {{request.script_root|tojson|safe}};
	   			var canvasObj = document.getElementById("canvas");
	   			var img = canvasObj.toDataURL('image/png');
	   			$.ajax({
	   				type: "POST",
	   				url: $SCRIPT_ROOT + "/predict/",
	   				data: img,
	   				success: function(data){
	   					$('#result').text('Predicted Output: ' + data);
	   				}
	   			});
	   		});
	   </script>
</body>
</html>
